import { ThemeVarService } from '../../lib/abstract/style/theme_var/service'
import { ICON_IDS } from '../../lib/icons/types/constants'
import { PROJECT_PREFIX } from '../../types/constants'

export function styles(className: string): string {
  return `
    .${className} {
      all: initial !important;
      position: relative !important;
      box-sizing: border-box !important;
      display: inline-flex !important;
      align-items: center !important;
      text-align: center !important; /* 控制居中 */
      overflow: visible !important; /* 允许内容溢出 */
      z-index: 1 !important; /* 确保在下拉菜单上方 */
      width: 100% !important;
      
      label {
        display: inline-block !important;
        margin-bottom: 4px !important;
        margin-right: 0.4em !important;
        font-size: 15px !important;
        color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
        font-weight: 500 !important;
        white-space: nowrap;
      }
      
      select {
        /* 禁用原生样式 */
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        
        position: relative;
        display: block !important;
        z-index: 1000 !important; /* 提高下拉菜单的z-index */
        appearance: none !important;
        padding: 6px 45px 6px 12px !important;
        margin-left: auto !important;
        font-size: 14px !important;
        border: 1px solid var(--${PROJECT_PREFIX}-theme-border-neutral) !important;
        background-color: var(--${PROJECT_PREFIX}-theme-select-bg) !important;
        color: var(--${PROJECT_PREFIX}-theme-select-text) !important;
        border-radius: 5px !important;
        outline: none !important;
        cursor: pointer !important;
        background-repeat: no-repeat !important;
        background-position: right 8px center !important;
        background-size: 16px !important;
        background-image: var(${ThemeVarService.getInstance().generateIcon(ICON_IDS.navigation.arrowsDown)}) !important;
        
        &.no-clear {
          padding-right: 30px !important;
        }
        
        &:hover {
          outline: none !important;
          border: 1px solid var(--${PROJECT_PREFIX}-theme-border-primary) !important;
        }
        
        &:focus {
          outline: none !important;
          background-color: var(--${PROJECT_PREFIX}-theme-select-active-bg) !important;
          color: var(--${PROJECT_PREFIX}-theme-select-active-text) !important;
        }
        
        option {
          border-color: red !important;
          background-color: var(--${PROJECT_PREFIX}-theme-select-option-bg) !important;
          color: var(--${PROJECT_PREFIX}-theme-select-option-text) !important;
          
          &:checked {
            background-color: var(--${PROJECT_PREFIX}-theme-select-option-checked-bg) !important;
            color: var(--${PROJECT_PREFIX}-theme-select-option-checked-text) !important;
          }
          
          &[disabled] {
            color: var(--${PROJECT_PREFIX}-theme-select-option-disabled-text) !important;
          }
        }
      }  

      .clear-btn {
        position: absolute;
        right: 22px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        color: var(${ThemeVarService.getInstance().default.text.neutral}) !important;
        border: none;
        padding: 4px;
        cursor: pointer;
        opacity: 0.5;
        z-index: 1001 !important; /* 确保清除按钮在下拉菜单上方 */
        
        &:hover {
          opacity: 1;
          color: var(${ThemeVarService.getInstance().message.orange.textPrimary}) !important;
        }
        
        &[disabled] {
          display: none !important;
        }
        
        svg {
          display: block;
          fill: currentColor;
        }
      }
    }
  `
}
